﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Graph
</asp:Content>
<asp:Content ID="HC" ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript" src="../../Scripts/jquery-1.4.4.js"></script>
    <script type="text/javascript" src="../../Scripts/highcharts.src.js"></script>
    <script type="text/javascript" src="../../Highcharts-2.1.4/js/modules/exporting.src.js"></script>
    <script type="text/javascript">
        var chart;
        $(document).ready(function () {

            // define the options
            var options = {

                chart: {
                    renderTo: 'container'
                },

                title: {
                    text: '参观www.highcharts.com的用户'
                },

                subtitle: {
                    text: '来源：iDong'
                },

                xAxis: {
                    type: 'datetime',
                    tickInterval: 7 * 24 * 3600 * 1000, // one week
                    tickWidth: 0,
                    gridLineWidth: 1,
                    labels: {
                        align: 'left',
                        x: 3,
                        y: -3
                    }
                },

                yAxis: [{ // left y axis
                    title: {
                        text: null
                    },
                    labels: {
                        align: 'left',
                        x: 3,
                        y: 16,
                        formatter: function () {
                            return Highcharts.numberFormat(this.value, 0);
                        }
                    },
                    showFirstLabel: false
                }, { // right y axis
                    linkedTo: 0,
                    gridLineWidth: 0,
                    opposite: true,
                    title: {
                        text: null
                    },
                    labels: {
                        align: 'right',
                        x: -3,
                        y: 16,
                        formatter: function () {
                            return Highcharts.numberFormat(this.value, 0);
                        }
                    },
                    showFirstLabel: false
                }],

                legend: {
                    align: 'left',
                    verticalAlign: 'top',
                    y: 20,
                    floating: true,
                    borderWidth: 0
                },

                tooltip: {
                    shared: true,
                    crosshairs: true
                },

                plotOptions: {
                    series: {
                        cursor: 'pointer',
                        point: {
                            events: {
                                click: function () {
                                    hs.htmlExpand(null, {
                                        pageOrigin: {
                                            x: this.pageX,
                                            y: this.pageY
                                        },
                                        headingText: this.series.name,
                                        maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
												this.y + ' visits',
                                        width: 200
                                    });
                                }
                            }
                        },
                        marker: {
                            lineWidth: 1
                        }
                    }
                },

                series: [{
                    name: '所以参观者',
                    lineWidth: 4,
                    marker: {
                        radius: 4
                    }
                }, {
                    name: '新参观者'
                }]
            }

            // Load data asynchronously using jQuery. On success, add the data
            // to the options and initiate the chart.
            // This data is obtained by exporting a GA custom report to TSV.
            // http://api.jquery.com/jQuery.get/
            jQuery.get('../../Highcharts-2.1.4/examples/analytics.tsv', null, function (tsv) {
                var lines = [],
						listen = false,
						date,

                // set up the two data series
						allVisits = [],
						newVisitors = [];

                try {
                    // split the data return into lines and parse them
                    tsv = tsv.split(/\n/g);
                    jQuery.each(tsv, function (i, line) {

                        // listen for data lines between the Graph and Table headers
                        if (tsv[i - 3] == '# Graph') {
                            listen = true;
                        } else if (line == '' || line.charAt(0) == '#') {
                            listen = false;
                        }

                        // all data lines start with a double quote
                        if (listen) {
                            line = line.split(/\t/);
                            date = Date.parse(line[0] + ' UTC');

                            allVisits.push([
								date,
								parseInt(line[1].replace(',', ''), 10)
							]);
                            newVisitors.push([
								date,
								parseInt(line[2].replace(',', ''), 10)
							]);
                        }
                    });
                } catch (e) { alert(e.message) }
                options.series[0].data = allVisits;
                options.series[1].data = newVisitors;

                chart = new Highcharts.Chart(options);
            });

        });
				
		</script>
    <%--        <script type="text/javascript" src="http://www.highcharts.com/highslide/highslide-full.min.js"></script>
		<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide.config.js" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/highslide/highslide.css" />
--%>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        Graph</h2>
    <div id="container" style="width: 800px; height: 400px; margin: 0 auto">
    </div>
</asp:Content>
